<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"/>
    <title>Document</title>
    <link rel="stylesheet" href="css/base.css"/>
    <link rel="stylesheet" href="css/index.css"/>
</head>
<body>
<div class="jingdong">
    <!-- 头部-->
    <header class="header">
        <div class="header-box">
            <a class="icon_logo" href="#"></a>
            <!-- 表单元素标签-->
            <form action="#">
                <span class="icon_search"></span>
                <input type="search" placeholder="请输入内容"/>
            </form>
            <a class="login" href="#">登录</a>
        </div>
    </header>
    <!-- 轮播图-->
    <div class="banner">
        <ul>
            <li><a href="#"><img src="images/l8.jpg" alt=""/></a></li>
            <li><a href="#"><img src="images/l1.jpg" alt=""/></a></li>
            <li><a href="#"><img src="images/l2.jpg" alt=""/></a></li>
            <li><a href="#"><img src="images/l3.jpg" alt=""/></a></li>
            <li><a href="#"><img src="images/l4.jpg" alt=""/></a></li>
            <li><a href="#"><img src="images/l5.jpg" alt=""/></a></li>
            <li><a href="#"><img src="images/l6.jpg" alt=""/></a></li>
            <li><a href="#"><img src="images/l7.jpg" alt=""/></a></li>
            <li><a href="#"><img src="images/l8.jpg" alt=""/></a></li>
            <li><a href="#"><img src="images/l1.jpg" alt=""/></a></li>
        </ul>
        <ul>
            <li class="now"></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </div>
    <!-- 导航栏-->
    <div class="nav">
        <ul class="clearfix">
            <li>
                <a href="#">
                    <img src="images/nav0.png" alt=""/>

                    <p>分类查询</p>
                </a>
            </li>
            <li>
                <a href="#">
                    <img src="images/nav1.png" alt=""/>

                    <p>分类查询</p>
                </a>
            </li>
            <li>
                <a href="#">
                    <img src="images/nav2.png" alt=""/>

                    <p>分类查询</p>
                </a>
            </li>
            <li>
                <a href="#">
                    <img src="images/nav3.png" alt=""/>

                    <p>分类查询</p>
                </a>
            </li>
            <li>
                <a href="#">
                    <img src="images/nav4.png" alt=""/>

                    <p>分类查询</p>
                </a>
            </li>
            <li>
                <a href="#">
                    <img src="images/nav5.png" alt=""/>

                    <p>分类查询</p>
                </a>
            </li>
            <li>
                <a href="#">
                    <img src="images/nav6.png" alt=""/>

                    <p>分类查询</p>
                </a>
            </li>
            <li>
                <a href="#">
                    <img src="images/nav7.png" alt=""/>

                    <p>分类查询</p>
                </a>
            </li>
        </ul>
    </div>
    <!-- 商品部分-->
    <main class="product">
        <!-- 掌上秒杀-->
        <section class="product-box">
            <div class="product-til no-border">
                <div class="kill-left f-left">
                    <span class="kill-logo"></span>
                    <a href="#">掌上秒杀</a>

                    <div class="kill-time">
                        <span>0</span>
                        <span>0</span>
                        <span>:</span>
                        <span>0</span>
                        <span>0</span>
                        <span>:</span>
                        <span>0</span>
                        <span>0</span>
                    </div>
                </div>
                <div class="kill-right f-right"><a href="#">更多></a></div>
            </div>
            <div class="product_con ">
                <ul class="clearfix">
                    <li>
                        <a href=""><img src="images/detail01.jpg" alt=""/></a>
                        <p>¥10.00</p>
                        <p>¥100.00</p>
                    </li>
                    <li>
                        <a href=""><img src="images/detail02.jpg" alt=""/></a>
                        <p>¥10.00</p>
                        <p>¥100.00</p>
                    </li>
                    <li>
                        <a href=""><img src="images/detail01.jpg" alt=""/></a>
                        <p>¥10.00</p>
                        <p>¥100.00</p>
                    </li>
                </ul>
            </div>
        </section>
        <!-- 京东超市-->
        <section class="product-box">
            <div class="product-til"><h2>京东超市</h2></div>
            <div class="product_con clearfix">
                <a href="#"><img class="w-50 f-left b-right" src="images/cp1.jpg" alt=""/></a>
                <a href="#"><img class="w-50 f-right b-bottom" src="images/cp2.jpg" alt=""/></a>
                <a href="#"><img class="w-50 f-right" src="images/cp3.jpg" alt=""/></a>
            </div>
        </section>

        <section class="product-box">
            <div class="product-til"><h2>京东超市</h2></div>
            <div class="product_con clearfix">
                <a href="#"><img class="w-50 f-right b-left" src="images/cp4.jpg" alt=""/></a>
                <a href="#"><img class="w-50 f-left b-bottom" src="images/cp5.jpg" alt=""/></a>
                <a href="#"><img class="w-50 f-left" src="images/cp6.jpg" alt=""/></a>
            </div>
        </section>

        <section class="product-box">
            <div class="product-til"><h2>京东超市</h2></div>
            <div class="product_con clearfix">
                <a href="#"><img class="w-50 f-left b-right" src="images/cp1.jpg" alt=""/></a>
                <a href="#"><img class="w-50 f-right b-bottom" src="images/cp2.jpg" alt=""/></a>
                <a href="#"><img class="w-50 f-right" src="images/cp3.jpg" alt=""/></a>
            </div>
        </section>
    </main>
</div>
<script src="js/zepto/zepto.min.js"></script>
<!--扩展性选择器模块-->
<script src="js/zepto/selector.js"></script>
<!--动画模块-->
<script src="js/zepto/fx.js"></script>
<!--移动端模块-->
<script src="js/zepto/touch.js"></script>
<script>
    //页面加载完成后执行代码
    $(function(){
        var $banner = $(".banner");
        var width = $banner.width();
        var $imageBox = $banner.find('ul:eq(0)');
        var $pointBox = $banner.find('ul:eq(1)');
        var $points = $pointBox.find('li');
        var index =1;
        //给图片盒子设置动画
        var animation = function(callback){
            $imageBox.animate({'transform':'translateX('+(-index*width)+'px)'},200,"ease",function(){
                if(index>=9){
                    index=1;
                }else if(index <=1){
                    index = 8;
                }
                $imageBox.css({'transform':'translateX('+(-index*width)+'px)'});
                callback&&callback();
            });
        }
        //自动轮播

        var timer = setInterval(function(){
            index++;
            animation();
        },3000);

        //向左滑动
        $imageBox.on("swipeLeft",function(){
            clearInterval(timer);
            index++;
            animation(function(){
                clearInterval(timer);
                timer = setInterval(function(){
                    index++;
                    animation();
                },3000);
            });
        });

        //向右滑动
        $imageBox.on("swipeRight",function(){
            clearInterval(timer);
            index--;
            animation(function(){
                clearInterval(timer);
               timer = setInterval(function(){
                    index++;
                    animation();
                },3000);
            });
        })
    });


</script>
</body>
</html>
